<template>
  <view class="image-preview-wrapper">
    <image class="preview-image" :src="src" @click="showPreview" mode="aspectFill" />
    <nut-image-preview
      :show="isPreviewShow"
      :images="previewImages"
      :init-no="0"
      :content-close="true"
      @close="closePreview"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

interface Props {
  src: string
  width?: string | number
  height?: string | number
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
}

const props = withDefaults(defineProps<Props>(), {
  width: 100,
  height: 100,
  fit: 'cover',
})

const previewImages = computed(() => [
  {
    src: props.src,
    width: 800,
    height: 800,
  },
])

const isPreviewShow = ref(false)

const showPreview = () => {
  isPreviewShow.value = true
}

const closePreview = () => {
  isPreviewShow.value = false
}
</script>

<style scoped>
.image-preview-wrapper {
  display: inline-block;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
}
</style>
